<template>
    <div class="shopCar">
       <yx-header>
            <template #left>
               <span class="red" @click="isEdit=!isEdit">{{isEdit?'编辑':'完成'}}</span>
            </template>
            <template #center>
               购物车列表
            </template>
            <template #right>
              
            </template>
        </yx-header>
        <!-- 购物车列表 -->
        <div class="cart-con">
            <img src="../../assets/img/dp.png" alt="" class="dp" v-if="!token || $store.state.shopList.length==0">
            <!-- 滑动单元格 -->
            <van-swipe-cell v-else v-for="(item,index) in shopList" :key="index">
                <!-- 复选框 -->
                <van-checkbox v-model="item.status" @change="checks"></van-checkbox>
                <!-- 内容 -->
            <!-- 商品卡片 -->
                <van-card
                   
                    :price="item.price"
                   
                    :title="item.name"
                    :thumb="item.img"
                    >
                    <template #tags>
                        
                        <span class="ticName">{{item.ticName}}</span>
                    </template>
                   <template #num>
                        <van-stepper v-model="item.carNum" />
                    </template>
                    </van-card>

                <template #right>
                    <van-button square type="danger" text="删除" @click="del(index)"/>
                </template>
            </van-swipe-cell>
        </div>
        <!-- 猜你喜欢 -->
        <div class="like">
               <div class="like-tit">猜你喜欢</div> 
               <div class="like-list">
                   <goods-item v-for="(item,index) in goodsList" :key="index" :item="item" :sales="true" @click="$router.push(`/detail/${item.id}`)"></goods-item>
               </div>
        </div>
        <!-- 提交订单栏 -->
        <van-submit-bar :price="totalPrice*100" @submit="onSubmit" :button-text="isEdit?'提交订单':'删除订单'" >
            <van-checkbox v-model="checkAll" @click="selectAll(checkAll)">全选</van-checkbox>
      </van-submit-bar>
    </div>
</template>
<script>
import yxHeader from '@/components/yxHeader'
import goodsItem from '@/components/goodsItem'
import {ref,reactive,toRefs,computed} from 'vue'
import {useStore} from 'vuex'
import {getGoodsList} from '@/utils/home'
import { Notify } from 'vant';
import {useRouter} from 'vue-router'




export default {
    setup(){
        const {push} = useRouter()
        const {state,commit,getters} = useStore()
        const data = reactive({
            isEdit:true,//true编辑 false 完成
            token:localStorage.getItem('token'),
            checkAll:false,//全选的默认状态
            goodsList:[],//存放截图后的数据
        })
        const shopList = computed(()=>state.shopList)
    //    全选
    const selectAll=(all)=>{
        console.log('all');
         commit('selectAll',all)
    }
        // 取消全选
    const checks=()=>{
        data.checkAll = state.shopList.every(item=>item.status)
    }
    // 获取总价格
    const totalPrice = computed(()=>getters.getPrice)
    //   删除 
    const del =(index)=>{
        commit('del',index)
        data.checkAll = state.shopList.length?state.shopList.every(item=>item.status):false
    }
    // 获取所有的商品列表
    getGoodsList().then(res=>{
        // console.log(res.data) 28条  最大下标27
        // 任意截取4条    slice(截图开始位置，截取的结束位置)不符合
        // splice(开始位置,4)   只需要获取到截取开始位置 ，而且开始位置是随机的 最大下标只能是24 不能大于24，
        // 所有开始位置  0-24之前 包括0和24  0-24之前的随机数  Math.random() (0-1之前的随机数)
        let len = res.data.length-4 //长度
       console.log(len*Math.random())

       data.goodsList =res.data.splice(len*Math.random(),4)
       console.log(data.goodsList)
       


    })
    // 提交订单的事件
    const onSubmit=()=>{
        // some只要有一个满足条件就为真
        let flag = state.shopList.some(item=>item.status)
         if(!flag){
            Notify({ type: 'danger', message: '请勾选商品' });
            return
         }
         if(data.isEdit){
            // 编辑   提交订单

        //  让购物车里面选中的商品的order的状态变为true
        commit('editOrder')
        // 跳转页面
        push('/order')


         }else{
            // 完成   删除所选
            commit('selectDel')

         }

         
    }
        return {...toRefs(data),shopList,selectAll,checks,totalPrice,del,onSubmit}
    },
    components:{
        yxHeader,
        goodsItem
    }
}
</script>
<style lang="scss" scoped>
.shopCar{
    margin-bottom: 100px;
}
.cart-con{
    .dp{
        width: 100%;
        height: 375px;
    }
}
:deep(.van-swipe-cell__wrapper){
    padding: 0 16px;
    display: flex;
    align-items: center;
    // justify-content: space-between;
    .van-card{
        flex:1;
        background: #fff;
        .van-card__title{
            font-size: 14px;
        }
    }
}
.van-button--danger{
    height: 100%;
}
.ticName{
   font-size: 12px;
   color:#999; 
   margin-top:5px;
}
.van-submit-bar{
    margin-bottom: 50px;
}
.like-tit{
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
}
.like-list{
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
}
</style>
